<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mybatis-plus代码生成器</title>
    <link rel="stylesheet" href="layui-v2.8.11/layui/css/layui.css">


</head>
<body>
<div class="layui-container">
    <blockquote class="layui-elem-quote" style="margin-top: 20px">
        mybatis-plus代码生成器
    </blockquote>
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span><span>数据库url</span></label>
            <div class="layui-input-block">
                <input type="text" name="url" id="url" autocomplete="on" placeholder="请输入" lay-verify="required"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>数据库用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" id="userName" autocomplete="on" placeholder="请输入"
                       lay-verify="required"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>数据库密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" id="password" autocomplete="on" placeholder="请输入"
                       lay-verify="required"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>数据库表</label>
            <div class="layui-input-inline" id="selectTable">
            </div>
            <button onclick="refreshTableNames()" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-refresh"></i>
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" autocomplete="on" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>模块名</label>
            <div class="layui-input-block">
                <input type="text" name="moduleName" id="moduleName" lay-verify="required" autocomplete="on"
                       placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生成在项目内</label>
            <div class="layui-input-block">
                <input type="checkbox" name="codeInProject" lay-filter="codeInProject" checked>
            </div>
        </div>
        <div id="codePathDiv" style="display: none" class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>生成代码路径</label>
            <div class="layui-input-block">
                <input type="text" name="codePath" id="codePath" autocomplete="on"
                       placeholder="默认: D:\\" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center">
                <button onclick="buildCode()" type="button" class="layui-btn">生成代码</button>
            </div>
        </div>
    </form>
</div>


<!-- body 末尾处引入 layui -->
<script src="layui-v2.8.11/layui/layui.js"></script>
<script src="layui-v2.8.11/xm-select.js"></script>
<script src="jquery-v3.7.0.js"></script>
<script>
    // 返回成功的code码
    let successCode = "00000";
    //加载组件
    let tableXmSelect;
    layui.extend({
        xmSelect: 'xm-select'
    }).use(['xmSelect'], function () {
        xmSelect = layui.xmSelect;
        //渲染多选
        tableXmSelect = xmSelect.render({
            el: '#selectTable',
            filterable: true,
            data: []
        })

    })

    function refreshTableNames() {
        let url = $('input[name="url"]').val();
        let userName = $('input[name="userName"]').val();
        let password = $('input[name="password"]').val();

        let urlValid = layui.form.validate('#url');
        let userNameValid = layui.form.validate('#userName');
        let passwordValid = layui.form.validate('#password');
        if (!urlValid || !userNameValid || !passwordValid) {
            return;
        }
        let params = {
            url: url,
            userName: userName,
            password: password,
            tableNames: JSON.stringify(tableXmSelect.getValue())
        };
        console.log(params);
        $.get("/builder/table-names", params, function (data) {
            if (data.code === successCode) {
                // 渲染表数据
                xmSelect.render({
                    el: '#selectTable',
                    filterable: true,
                    data: data.result
                })
            }
        })
    }

    // 创建代码
    function buildCode() {
        let url = $('input[name="url"]').val();
        let userName = $('input[name="userName"]').val();
        let password = $('input[name="password"]').val();
        let author = $('input[name="author"]').val();
        let moduleName = $('input[name="moduleName"]').val();
        let codePath = $('input[name="codePath"]').val();
        let tableNames = tableXmSelect.getValue();
        let codeInProject = $("[name='codeInProject']").prop('checked');
        let names = [];
        for (let tableName of tableNames) {
            names.push(tableName.value);
        }
        let urlValid = layui.form.validate('#url');
        let userNameValid = layui.form.validate('#userName');
        let passwordValid = layui.form.validate('#password');
        let moduleNameValid = layui.form.validate('#moduleName');
        let codePathValid = layui.form.validate('#codePath');
        if (!urlValid || !userNameValid || !passwordValid || !moduleNameValid || !codePathValid) {
            return;
        }
        if (!names.length) {
            layer.msg('选择的表不能为空!', {icon: 0}, function () {
            });
            return;
        }
        console.log("codePath----",codePath);
        if (!codeInProject && !codePath){
            codePath = "D:\\"
        }
        let params = {
            url: url,
            userName: userName,
            password: password,
            tableNames: names,
            author: author,
            moduleName: moduleName,
            codePath: codePath,
            codeInProject: codeInProject
        };
        console.log("参数{}",JSON.stringify(params));
        $.post({
            url: "/builder/code",
            headers: {
                'Content-Type': 'application/json'
            },
            data: JSON.stringify(params),
            success: function (response){
                if (response.code === successCode){
                    layer.msg('代码创建成功!');
                }else {
                    // 提示失败

                }
            }
        })
    }
    // 是否在项目内生成代码监听
    layui.use(function(){
        let form = layui.form;
        form.on('checkbox(codeInProject)',function (data) {
            console.log("codeInProject监听");
            let elem = data.elem; // 获得 checkbox 原始 DOM 对象
            let checked = elem.checked; // 获得 checkbox 选中状态

            let codeInProject = $("[name='codeInProject']").prop('checked');
            console.log("--------",codeInProject);
            if (checked){
                $("#codePathDiv").attr("style","display: none");
            }else {
                $("#codePathDiv").attr("style","display: block");
            }
        })
    });

</script>
<style type="text/css">
    .layui-form-pane .layui-form-label {
        width: 150px;
    }

    .layui-form-pane .layui-input-block {
        margin-left: 150px;
    }

    .required {
        margin-right: 2px;
        color: red;
    }
</style>
</body>

</html>
